<template>
  <el-button type="primary" @click="dialogVisible=true">打开子模块</el-button>
  <!--弹窗加载子模块-->
  <el-dialog
    v-model="dialogVisible"
    :show-close="true"
    :title="'测试'"
    width="70%"
    draggable
    :append-to-body="true"
    :modal="false"
    :destroy-on-close="true"
  >
    <div style="border: 1xp;padding: 2px;">
      <!--递归加载子模块，可以无限加载-->
      <sub-comp></sub-comp>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 列表页面的状态
  import { getListState } from '../state/list'

  // 加载子组件
  import subComp from '../_crud.vue'
  
  // 动态组件，用于加载子组件
  const dialogVisible = ref(false)

  // 获取列表页面的状态
  const state = getListState()

  // 获取上级状态
  const parentState = getListState()
  console.log('上级状态：-----\n', parentState)

  if (parentState) {
    // 有上级
    // state.meta.deep = parentState.meta.deep + 1
    // state.meta.title += state.meta.deep
  }
  console.log('statess\n', state)
  
</script>